<template>
  <div class="logistics px-32rpx">
    <div class="sticky left-0 right-0 top-0 z-9 h-full bg-hex-ffffff">
      <div class="relative">
        <div class="z-999 flex items-center justify-between" :style="{ paddingTop: `${searchBarTop}px` }" @click.stop="goback">
          <uni-icons type="back" size="28" />
          <span class="flex-1 text-36rpx" style="text-align: center;">物流</span>
        </div>
      </div>
    </div>
    <div class="mt-32rpx">
      <div style="box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(0,0,0,0.06);" class="h-180rpx flex items-center rounded-24rpx px-24rpx">
        <div class="h-132rpx w-126rpx bg-hex-f5f5f5" />
        <div class="ml-32rpx flex-1">
          <div class="mb-12rpx text-28rpx text-hex-333">顺丰快递</div>
          <div class="mb-12rpx text-24rpx text-hex-7C8699">订单号：jd33222</div>
          <div class="text-24rpx text-hex-7C8699">电话：24544</div>
        </div>
      </div>
      <div class="mt-32rpx">
        <step-bar :steps="[{
          title: '待发货',
          desc: '2023-7-21',
        }, {
          title: '待收货',
          desc: '2023-7-21',
        }, {
          title: '完成',
          desc: '2023-7-21',
        }]" :currentStep="0" is-vertical />
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup>
let topHight = $ref(0)
const goback = () => {
  uni.navigateBack({
    delta: 1,
  })
}
let searchBarTop: any = $ref('24')
onLoad(() => {
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  // #endif
})
</script>

<style lang='scss'>
</style>
